export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    onShow() {
        const draw = () => {
            const el = this.$refs.canvas;
            const ctx = el.getContext('2d');

            // 双缓冲方案不起作用，drawImage指令是不是不支持canvas源
//            const bufferEl = this.$refs.canvasbuffer;
//            const bufferCtx = bufferEl.getContext('2d');

            ctx.clearRect(0, 0, 100, 100);
            ctx.fillStyle = 'rgb(255,0,0)';
            ctx.fillRect(0, 0, 50, 50);
            ctx.fillStyle = 'rgb(0,0,255)';
            ctx.fillRect(50, 50, 50, 50);
            //            bufferCtx.fillStyle = 'rgb(255,0,0)';
            //            bufferCtx.fillRect(0, 0, 50, 50);
            //            bufferCtx.fillStyle = 'rgb(0,0,255)';
            //            bufferCtx.fillRect(50, 50, 50, 50);

            // 尝试了下imageData这种方案，效率也很差
            //            const imageData = bufferCtx.getImageData(0,0,200,200)
            //            ctx.putImageData(imageData, 0, 0, 200, 200);
            requestAnimationFrame(draw);
        }
        requestAnimationFrame(draw);
    }
}
